<!DOCTYPE html>
<html>
	<head>
		<title>Test Graph</title>
		<script src="../../os3jslib/liwe.js"></script>
		<script src="../../os3jslib/utils.js"></script>
		<script src="../../os3jslib/dom.js"></script>
		<script src="../../os3jslib/event.js"></script>
		<script src="../../os3jslib/object_enh.js"></script>
		<script src="../../os3jslib/string_enh.js"></script>
		<script src="../../os3jslib/array_enh.js"></script>
		<script src="../wwl.js"></script>
		<script src="../graph/graph.js"></script>

		<script>
		function init () 
		{
			var types = 'bar bipolar fuel funnel gantt hbar hprogress led line meter odometer pie radar rose rscatter scatter thermometer vprogress waterfall'.split ( ' ' );
			types.iterate ( function ( v )
			{
				var div = document.createElement ( 'div' );
				div.id = v;
				div.className = 'graph';
				$( 'graph' ).appendChild ( div );
				var data = null;
				var options = {};
				switch ( v )
				{
					case 'led':
						data = [ '1234567890' ];
						break;
					case 'fuel':
					case 'gauge':
					case 'meter':
					case 'odometer':
						data = [ 0, 100, rnd () ];
						break;
					case 'bipolar':
						data = [ rndset (), rndset () ];
						break;
					case 'hprogress':
					case 'vprogress':
						data = [ rnd (), 100 ];
						break;
					case 'scatter':
						data = [
							[
								[ 10, 20 ],
								[ 40, 20, null, 'Test me' ],
								[ 20, 30 ],
								[ 10, 30 ],
								[ 50, 50 ],
							]
						];
						options = {
							'chart.xmax': 100
						};
						break;
					case 'gantt':
						options = {
							'chart.xmax': 100,
							'chart.events': [
								[ 10, 20, null, 'Test 1' ],
								[ 20, 30, null, 'Test 2' ],
								[ 30, 40, null, 'Test 3' ],
								[ 40, 50, null, 'Test 4' ],
								[ 50, 60, null, 'Test 5' ]
							]
						};
						break;
					default:
						data = [ [ rndset (), rndset (), rndset (), rndset (), rndset () ] ];
						break;
				}
				draw_graph ( v, data, options );
			});
		}
			
		function draw_graph ( v, data, options )
		{
			var config = { 
				'chart.text.angle': 90,
				'chart.labels': labels (),
				'chart.key': labels ()
			}
			options.iterate ( function ( v, k )
			{
				config [ k ] = v;
			});
			g = new WWL.graph ( v, [ 'tooltips', 'context' ] );
			g.draw ( {
				gtype: v,
				data: data,
				config: config
			} );
		}

		function redraw_graph ()
		{
			g.draw ( {
				data: rndset (),
				gtype: $v ( 'gtype' ),
			} );
		}
		
		function rnd ()
		{
			return 10 + Math.round ( Math.random () * 80 );
		}

		function rndset ()
		{
			var data = [];
			for ( var i = 0; i < 5; i++ )
				data.push ( rnd () );
			return data;
		}

		function labels ()
		{
			var label = [];
			for ( var i = 0; i < 5; i++ )
				label.push ( 'Label ' + ( i + 1 ) );
			return label;
		}
		</script>
		<style type="text/css">
		.graph {
			width: 300px;
			height: 300px;
			float: left;
		}
		</style>

	</head>

	<body onload="init()">
		<div id="graph" style="width: 100%"></div>
	</body>
</html>
